<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Handlebars.js Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/handlebars/dist/handlebars.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>人员列表</h1>
    <div id="table-container"></div>

    <script id="template" type="text/x-handlebars-template">
        {{#each lists}}
            <table>
                <thead>
                    <tr>
                        <th>consignee</th>
                        <th>mobile</th>
                        <th>address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{consignee}}</td>
                        <td>{{mobile}}</td>
                        <td>{{address}}</td>
                    </tr>
                </tbody>
            </table>
            <table>
                <thead>
                    <tr>
                        <th>serial_number</th>
                        <th>order_sn</th>
                        <th>goods_name</th>
                        <th>goods_num</th>
                        <th>goods_price</th>
                        <th>total_price</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each goods_info}}
                        <tr>
                            <td>{{serial_number}}</td>
                            <td>{{order_sn}}</td>
                            <td>{{goods_name}}</td>
                            <td>{{goods_num}}</td>
                            <td>{{goods_price}}</td>
                            <td>{{total_price}}</td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>
            <br> <!-- 换行 -->
        {{/each}}
    </script>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'https://gitee.com/jianxia84/svcontroller/raw/master/orders.json',
                dataType: 'json',
                success: function(data) {
                    var template = Handlebars.compile($('#template').html());
                    var rendered = template(data.data);
                    $('#table-container').html(rendered);
                }
            });
        });
    </script>
</body>
</html>
